<template>
<!-- 用户充电点位 -->
  <div class="chargeDots">
    <div class="station">
        <div  v-for="(i,k) in status" :key="k" ref="dots" style="position:relative">
            <div class="round" v-if="i"></div>
            <div class="round" style="background: white" v-else ></div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'chargeDots',
  props: ['status'],
  components: {
    
  },
  data() {
    return {
      
    };
  },
  computed: {
    choose_time(){
            return this.$store.state.choose_time;
        },
  },
  created() {
    // this.$nextTick(function () {
    //     // DOM 更新了
    //     let xuhao = this.choose_time.xuhao
    //     let divDom = document.createElement('div');
    //     divDom.classList.add("show")
    //     this.$refs.dots[xuhao].appendChild(divDom);
    //  })
      },
  mounted(){
      
    //   console.log(this.$refs.dots[xuhao].children[0]);
    //   let dom = document.querySelectorAll('round');
    
  },
  //因为有v-ifdom元素有改变
  updated(){
    console.log(111);
      this.$nextTick(function () {
        // DOM 更新了
        let xuhao = this.choose_time.xuhao
        let divDom = document.createElement('div');
        divDom.classList.add("show")
        this.$refs.dots[xuhao].appendChild(divDom);
     })
  },
  methods:{
    
  }
}
</script>

<style  lang="less">
  .chargeDots{
    .station{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding: 25px 0;
        border-top: 1px solid #f7f8f9;
        background-color: white;
        .round{
            width: 15px;
            height: 15px;
            background: #38b487;
            border-radius: 50%;
            box-shadow: 0 0 3px 2px #38b487;
        }
        .show{
            height: 0px;
            width: 0px;
            border: 10px;
            position: absolute;
            transform: scaleY(1.5) translateX(-2px);
            transform-origin: center;
            border: 10px solid transparent;
            border-bottom-color: #38b487;
        }
    }
  }
</style>